<template>
  <view class="loadingbox" :class="{ ac: store.loading }">
    <div class="loadbox flex_center">
      <image
        class="loading_img"
        :src="`${store.imgDomain}loading_1.png`"
        mode="widthFix"
      />
      <view class="flex_center">
        <text
          class="char"
          :style="{ animationDelay: `${index * 0.3}s` }"
          v-for="(char, index) in text.split('')"
          :key="index"
          >{{ char }}</text
        >
      </view>
    </div>
  </view>
</template>

<script setup>
import { useCounterStore } from '@/store';

const store = useCounterStore();
const text = '加载中';
</script>

<style lang="scss" scoped>
.loadingbox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999999999;
  transition: 0.2s;
  opacity: 0;
  pointer-events: none;
  &.ac {
    opacity: 1;
    pointer-events: all;
    .char {
      animation-play-state: running;
    }
  }
  .loadbox {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fff;
    width: 260rpx;
    height: 260rpx;
    border-radius: 20rpx;
    flex-direction: column;
    .loading_img {
      width: 160rpx;
      margin-bottom: 20rpx;
    }
    text {
      font-size: 30rpx;
      font-weight: 700;
    }
  }
}

.char {
  font-weight: 500 !important;
  color: #333;
  display: inline-block;
  /* 总时长=单字符动画(1.2s)+等待时间(1s)=2.2s，确保3字跳完+等1秒再循环 */
  animation: jump-cycle 2.2s infinite ease-in-out paused;
  animation-fill-mode: both;
}

/* 3个字符依次延迟，实现"逐个跳"效果 */
.char:nth-child(1) {
  animation-delay: 0s;
} /* 第1字立即开始 */
.char:nth-child(2) {
  animation-delay: 0.3s;
} /* 第2字晚0.3s */
.char:nth-child(3) {
  animation-delay: 0.6s;
} /* 第3字晚0.6s */

/* 动画循环：跳→回→等1秒 */
@keyframes jump-cycle {
  0%,
  10% {
    transform: translateY(0);
  } /* 初始静止 */
  30% {
    transform: translateY(-12rpx);
  } /* 上跳顶点 */
  50%,
  95% {
    transform: translateY(0);
  } /* 回位+保持静止（等待1秒） */
  100% {
    transform: translateY(0);
  } /* 循环衔接 */
}
</style>
